<template>
  <view class="page">
    <global-contact></global-contact>
    <view class="header">
      <view class="tab" :style="{ height: navHeight + 'px', 'padding-top': statusHeight + 'px' }">
        <image></image>
        <text>购物车</text>
      </view>
      <view class="top">
        <view class="top-1">
          <view class="title" @click="show = true">{{ title }}</view>
          <view class="top-gl" @click="handleChange">{{ types === 'pay' ? '管理' : '退出管理' }}</view>
        </view>
      </view>
    </view>
    <view class="kong" style="height: 230rpx;"></view>
    <view class="shop-box" v-for="(caritem, carindex) in cartData" :key="carindex"
      :style="{ 'marginTop': carindex == 0 ? '52rpx' : '20rpx' }">
      <view class="shop-1" @tap="allcheckTap(carindex)">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" mode="" class="shop_img1"
          v-if='!caritem.checked' />
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" mode="" class="shop_img1" v-else />
        <view class="titile">{{ caritem.title }}
          <!-- <view>趣味运动会 > </view> -->
        </view>
      </view>
      <view class="shop-con" v-for="(carvalue, valindex) in caritem.list" :key="valindex">
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" mode="" class="shop_img1"
          v-if='!carvalue.checked' @click.stop="checkTap(carindex, valindex)" />
        <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" mode="" class="shop_img1" v-else
          @click.stop="checkTap(carindex, valindex)" />
        <image :src="showImgApi + carvalue.img" class="shop_img2" />
        <view class="right">
          <view class="shop-title">{{ carvalue.title }}</view>
          <view class="flex" style="margin-top: 80rpx;">
            <view class="price"><span>￥</span>{{ carvalue.price }}</view>
            <view class="bottom">
              <!-- <view class="reduce" @tap="numchangeTap('minus',carindex,valindex)">-</view> -->
              <view class="num">×{{ carvalue.number }}</view>
              <!-- <view class="reduce add" @tap="numchangeTap('add',carindex,valindex)">+</view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="kong"></view>
    <view class="fixed">
      <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" mode="" class="shop_img1"
        v-if='!allselect' @tap="select_all" />
      <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" mode="" class="shop_img1" v-else
        @tap="select_all" />
      <view class="fixed_1">全选</view>
      <view class="fixed_2">合计: <span>￥</span><span style="font-size: 28rpx;">{{ totalPrice }}</span></view>
      <view class="fixed_btn" @click="handlePay">{{ types === 'pay' ? '去结算' : '删除' }}</view>
    </view>
    <block v-if="cartData.length == 0">
      <view class="emptyCar">
        <image src="https://www.atuanjian.com/appletStatic/static/shopCar/empty.png" mode="aspectFit"></image>
        <text>购物车是空的</text>
      </view>
    </block>
    <u-picker :show="show" keyName="label" :columns="navList" @cancel="cancel" @confirm="confirm"
      immediateChange="true"></u-picker>
    <tabBar current='3' :callPhone="callPhone"></tabBar>
  </view>
</template>

<script>
import tabBar from "@/components/tabBar.vue";
import {
  cardList,
  listsGroup
} from '@/utils/request.js'
import { statusHeight, navHeight } from "@/utils/common.js";
export default {
  data() {
    return {
      showImgApi: this.$config.showImgApi,
      callPhone: false,
      statusHeight: uni.getSystemInfoSync().statusBarHeight,
      navHeight: 0,
      totalPrice: 0,
      types: "pay",
      allselect: false,
      checked_img:
        "https://www.atuanjian.com/appletStatic/static/shopCar/empty.png",
      check_img:
        "https://www.atuanjian.com/appletStatic/static/images/u-13.png",
      cartData: [],
      navList: [[]],
      title: '',
      show: false,
      type: ''
    };
  },
  components: {
    tabBar,
  },
  onLoad() {
    this.statusHeight = statusHeight;
    this.navHeight = navHeight;
  },
  onShow() {
    if (!uni.getStorageSync('userInfo')) {
      return uni.navigateTo({ url: '/pagesB/login/login' })
    } else {
      this.getListsGroup()
      this.init()
    }
  },
  methods: {
    handlePay() {
      const selectedIds = [];

      // 遍历店铺列表
      this.cartData.forEach(store => {
        // 遍历每个店铺的商品列表
        store.list.forEach(item => {
          if (item.checked) {
            selectedIds.push(item.id);
          }
        });
      });

      // 验证是否有选中项
      if (selectedIds.length === 0) {
        uni.showToast({
          title: '请选择要支付的商品',
          icon: 'none'
        });
        return;
      }

      // 将ID数组转换为逗号分隔的字符串
      const cartIds = selectedIds.join(',');
      // 打印检查
      uni.navigateTo({
        url:'/pagesB/shopCar/pay?order_type='+1+'&ids='+JSON.stringify(cartIds)
      })
    },
    async cardList(data) {
      return await cardList(data)
    },
    async listsGroup(data) {
      return await listsGroup(data)
    },
    cancel() {
      this.show = false
    },
    confirm(e) {
      console.log(e.value[0])
      this.type = e.value[0].type
      this.show = false
      this.title = e.value[0].label
      this.cartData = []
      this.init()
    },
    getListsGroup() {
      let data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id }
      this.listsGroup(data).then(res => {
        if (res && res.length > 0) {
          let navList = res
          navList.forEach((item) => {
            item.label = item.title + `(${item.total})`
          })
          this.navList = [navList]
          this.title = res[0].title + `(${res[0].total})`
        }
      })
    },
    init() {
      let params = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, type: this.type }
      this.cardList(params).then(res => {
        if (res && res.length > 0) {
          let cartData = res
          cartData.forEach((formItem) => {
            formItem.checked = false
            formItem.list.forEach((item) => {
              item.checked = false
              item.price = Number(item.people_price)
              item.number = item.num
            })
          })
          this.cartData = res

        }
      })
    },
    select_all() {
      //全选
      this.allselect = this.cartData.every((r) => r.checked);
      if (!this.allselect) {
        for (let i in this.cartData) {
          this.cartData[i].checked = true;
          for (let j in this.cartData[i].list) {
            this.cartData[i].list[j].checked = true;
          }
        }
      } else {
        for (let i in this.cartData) {
          this.cartData[i].checked = false;
          for (let j in this.cartData[i].list) {
            this.cartData[i].list[j].checked = false;
          }
        }
        this.$forceUpdate();
      }
      this.allselect = !this.allselect;
      this.calculateTotal();
    },
    allcheckTap(carindex) {
      console.log(carindex, 'carindex')
      //店铺全选
      this.cartData[carindex].checked = !this.cartData[carindex].checked;
      if (this.cartData[carindex].checked) {
        for (let i in this.cartData[carindex].list) {
          this.cartData[carindex].list[i].checked = true;
        }
      } else {
        for (let i in this.cartData[carindex].list) {
          this.cartData[carindex].list[i].checked = false;
        }
      }
      this.calculateTotal();
      this.judgmentAll();
    },
    checkTap(carindex, valindex) {
      //单选
      this.cartData[carindex].list[valindex].checked =
        !this.cartData[carindex].list[valindex].checked;
      for (let i in this.cartData[carindex].list) {
        if (!this.cartData[carindex].list[i].checked) {
          this.cartData[carindex].checked = false;
        }
      }
      this.cartData[carindex].checked = this.cartData[carindex].list.every(
        (r) => r.checked
      );
      this.calculateTotal();
      this.judgmentAll();
    },
    calculateTotal() {
      var total = 0;
      for (let i in this.cartData) {
        for (let j in this.cartData[i].list) {
          if (this.cartData[i].list[j].checked) {
            total +=
              this.cartData[i].list[j].price *
              this.cartData[i].list[j].number;
          }
        }
      }
      this.totalPrice = total.toFixed(2);
    },
    judgmentAll() {
      //判断是否为全选  使用every() 方法测数组中的所有元素
      this.allselect = this.cartData.every((r) => r.checked);
    },
    handleChange() {
      this.types = this.types === "pay" ? "delete" : "pay";
    },
    numchangeTap(type, carindex, valindex) {
      var that = this;
      var cartData = this.cartData; //初始数据
      if (type == "minus") {
        //-
        var number = cartData[carindex].list[valindex].number;
        if (number <= 1) {
          return;
        } else {
          cartData[carindex].list[valindex].number--;
          that.cartData = cartData;
        }
      } else {
        var number = cartData[carindex].list[valindex].number;
        cartData[carindex].list[valindex].number++;
        that.cartData = cartData;
      }
      that.calculateTotal(); //计算价格
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f2f2f2;

  .emptyCar {
    @include flex_style(center, center, row nowrap);
    margin-bottom: 36rpx;

    image {
      width: 80rpx;
      height: 80rpx;
      margin-right: 18rpx;
    }

    text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      color: #888888;
    }
  }

  .header {
    width: 750rpx;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: #ffb850;

    .tab {
      padding-left: 30rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      image {
        width: 60rpx;
        height: 60rpx;
        margin-right: 250rpx;
      }

      text {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
}

.top {
  width: 100%;
  background-color: #ffb850;
  height: 80rpx;

  .top-1 {
    width: 694rpx;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

    .title {
      padding: 9rpx 25rpx;
      background-color: #FFDEAC;
      border-radius: 30rpx;
      font-size: 26rpx;
    }

    .top-gl {
      font-size: 26rpx;
    }
  }
}

.shop-box {
  width: 706rpx;
  padding: 22rpx 0 42rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 24rpx auto 0;
}

.shop-1 {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.titile {
  font-size: 26rpx;
  display: flex;
  align-items: center;

  view {
    display: block;
    margin-left: 14rpx;
    font-size: 16rpx;
    color: #d7d7d7;
  }
}

.shop-con {
  width: 95%;
  margin: 26rpx auto 0;
  display: flex;
  align-items: center;
}

.shop_img1 {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.shop_img2 {
  width: 180rpx;
  height: 180rpx;
  border-radius: 16rpx;
}

.right {
  width: 390rpx;
  height: 220rpx;
  margin-left: 20rpx;
  margin-top: 10rpx;
}

.shop-title {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
}

.kuan {
  width: 120rpx;
  height: 46rpx;
  line-height: 46rpx;
  background: #fafafa;
  border-radius: 10rpx;
  color: #9e9e9e;
  text-align: center;
}

.flex {
  margin-top: 12rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop_1 {
  font-size: 20rpx;
  color: #c4c4c4;
}

.price {
  color: #f59a23;
  font-size: 36rpx;
}

.price span {
  font-size: 24rpx;
  color: #f59a23;
}

.bottom {
  display: flex;
}

.reduce {
  width: 52rpx;
  height: 46rpx;
  line-height: 46rpx;
  border-radius: 22rpx 0 0 22rpx;
  border: 1rpx solid#A3A3A3;
  text-align: center;
}

.add {
  border-radius: 0 22rpx 22rpx 0;
}

.num {
  padding: 8rpx 4rpx;
  // border-top: 1rpx solid#A3A3A3;
  // border-bottom: 1rpx solid#A3A3A3;
  // border: 1rpx solid#797979;
  border-radius: 12rpx;
  font-size: 28rpx;
  height: 46rpx;
  line-height: 46rpx;
  text-align: center;
}

.fixed {
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 90rpx;
  right: 0;
  background: #ffffff;
  box-shadow: 0 -2rpx 5rpx rgba(170, 170, 170, 0.5);
}

.fixed image {
  width: 30rpx;
  height: 30rpx;
  margin-left: 36rpx;
}

.fixed_1 {
  font-size: 24rpx;
  margin-left: 10rpx;
  margin-right: 16rpx;
}

.fixed_2 {
  font-size: 24rpx;
  flex: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  span {
    color: #f59a23;
  }
}

.fixed_btn {
  width: 189rpx;
  height: 77rpx;
  line-height: 74rpx;
  color: #333333;
  background: #ffbb50;
  margin-left: 18rpx;
  border-radius: 64rpx;
  font-size: 26rpx;
  text-align: center;
  margin-right: 24rpx;
  color: #ffffff;
}

.btt {
  color: #979dad;
  background: #f7f8fc;
  margin-left: 0rpx;
}

.kong {
  width: 100%;
  height: 100rpx;
}
</style>